<script setup lang="ts">
import {appWindow, Theme} from '@tauri-apps/api/window';
import {onMounted, ref} from 'vue'
import {open} from '@tauri-apps/api/shell';
import EventBus from "../utils/eventBus";


let fullscreen = ref<boolean>(false)

let theme = ref<Theme>("light")

// 最小化
const minimize = async () => {
    await appWindow.minimize();
}

// 最大化
const maximize = async () => {
    await appWindow.toggleMaximize();
    fullscreen.value = !fullscreen.value
}

// 切换主题
const themeChange = (data: Theme) => {
    if (data == "light") {
        document.body.removeAttribute('arco-theme');
    } else {
        document.body.setAttribute('arco-theme', 'dark')
    }
    EventBus.emit("themeChange", data);
    theme.value = data
}

const goGitHub = () => {
    open("https://gitee.com/ZY_RAN/tauri-notable");
}
onMounted(async () => {
    fullscreen.value = await appWindow.isFullscreen();
    await appWindow.show()
    let theme = await appWindow.theme() ?? "light";
    themeChange(theme)
})

</script>

<template>
    <div class="header">
        <div class="drag" data-tauri-drag-region>
            <img src="../../src-tauri/icons/icon.png"> notable
        </div>
        <div class="btn-box">
            <div class="btn-item" @click="goGitHub">
                <svg class="md-editor-icon" aria-hidden="true">
                    <use xlink:href="#md-editor-icon-github"></use>
                </svg>
            </div>
            <div class="btn-item" @click="themeChange(theme=='dark'?'light':'dark')">
                <icon-moon-fill v-if="theme=='dark'"></icon-moon-fill>
                <icon-sun-fill v-else></icon-sun-fill>
            </div>
            <div class="btn-item" @click="minimize">
                <icon-minus/>
            </div>
            <div class="btn-item" @click="maximize">
                <icon-fullscreen-exit v-if="fullscreen"></icon-fullscreen-exit>
                <icon-fullscreen v-else></icon-fullscreen>
            </div>
            <div class="btn-item" @click="minimize">
                <icon-close/>
            </div>
        </div>

    </div>
</template>

<style lang="scss" scoped>
.header {
  height: 29px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-bg-3);
  border-bottom: 1px solid var(--color-neutral-4);

  .drag {
    flex: 1;
    height: 100%;
    cursor: default;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;

    img {
      height: 15px;
      margin: 0 5px;
    }
  }

  .btn-box {
    display: flex;
    height: 100%;
    display: flex;
    align-items: center;

    .btn-item {
      width: 45px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;


      &:hover {
        background-color: rgba(#000000, 0.1);
      }
    }

  }


}
</style>
